<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" active-color="var(--primary-color)">
      <template v-for="(item, index) in tabbarData">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <!-- <van-tabbar-item name="home" icon="home-o"></van-tabbar-item> -->
            <img :src="getAssetURL(currentIndex === index ? item.imageActive : item.image)" alt="" />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import tabbarData from '@/assets/data/tabbar.js'
import { getAssetURL } from '@/utils/load_assets.js'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

// 监听路由改变时，找到对应的索引，设置currentIndex
const currentIndex = ref(0)
const route = useRoute()
watch(route, (newRoute) => {
  const index = tabbarData.findIndex((item) => item.path === newRoute.path)
  if (index === -1) {
    return
  }
  currentIndex.value = index
})
</script>

<style lang="less" scoped>
.tab-bar {
  /** 修改第三方UI组件库的样式

  方法一：用插槽，插入自己的元素
    * 那么在 自己作用域中 直接修改

  方法二：全局定义一个变量，覆盖它默认变量的值
    * 缺点：全局修改

  方法三：局部定义一个变量，覆盖它默认变量的值
    * 优点：局部修改

  方法四：直接查找对应的 子组件选择器，修改样式
    * :deep(子组件中元素的选择器) 进行修改
    * 直接修改CSS
  */

  // 方法三
  // --van-tabbar-item-icon-size: 32px !important;

  // 方法四
  // :deep(.van-tabbar-item__icon) {
  //   font-size: 28px;
  // }

  img {
    height: 28px;
  }
}
</style>
